<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>订单详情</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .urgent-banner {
            background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
            color: white;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }
        .address-blur {
            filter: blur(4px);
            transition: filter 0.3s;
        }
        .address-blur:hover {
            filter: blur(0);
        }
        .fixed-bottom-bar {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
        .tag-skill {
            background-color: #f6ffed;
            border-color: #b7eb8f;
            color: #52c41a;
        }
        .tag-distance {
            background-color: #e6f7ff;
            border-color: #91d5ff;
            color: #1890ff;
        }
        .tag-urgent {
            background-color: #fff2f0;
            border-color: #ffccc7;
            color: #ff4d4f;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-4 flex items-center border-b border-gray-100 sticky top-0 z-10">
        <button class="mr-4 text-gray-600" onclick="history.back()">
            <i class="fas fa-chevron-left"></i>
        </button>
        <h1 class="text-lg font-medium flex-1 text-center">订单详情</h1>
    </header>

    <!-- 加急提示 -->
    <div class="urgent-banner py-2 px-4 text-center text-sm font-medium">
        <i class="fas fa-bolt mr-1"></i> 这是一笔加急订单，请尽快处理
    </div>

    <main class="pb-24">
        <!-- 订单基本信息 -->
        <section class="bg-white rounded-lg shadow-sm mx-4 mt-4 p-4">
            <div class="flex justify-between items-start mb-3">
                <h2 class="text-lg font-medium">日常保洁服务</h2>
                <div class="flex space-x-2">
                    <span class="tag-skill text-xs px-2 py-1 rounded-full border">技能匹配</span>
                    <span class="tag-distance text-xs px-2 py-1 rounded-full border">3公里内</span>
                </div>
            </div>
            
            <div class="flex items-center text-gray-500 text-sm mb-3">
                <i class="far fa-clock mr-2"></i>
                <span>今天 14:00-16:00 (2小时)</span>
            </div>
            
            <div class="flex items-center text-gray-500 text-sm mb-4">
                <i class="fas fa-map-marker-alt mr-2"></i>
                <span class="address-blur">北京市朝阳区****小区**号楼**单元</span>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
                <span class="text-gray-600">服务价格</span>
                <span class="text-xl font-medium text-red-500">¥120</span>
            </div>
        </section>

        <!-- 雇主需求 -->
        <section class="bg-white rounded-lg shadow-sm mx-4 mt-4 p-4">
            <h3 class="text-base font-medium mb-3 flex items-center">
                <i class="fas fa-clipboard-list text-blue-500 mr-2"></i>
                雇主需求
            </h3>
            
            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                <p class="text-gray-700">需要打扫3室1厅，重点清洁厨房油污和卫生间。家中有宠物猫一只，请注意关好门窗。希望阿姨能自带清洁工具。</p>
            </div>
            
            <div class="flex flex-wrap gap-2">
                <span class="tag-urgent text-xs px-2 py-1 rounded-full border">需要擦玻璃</span>
                <span class="tag-urgent text-xs px-2 py-1 rounded-full border">有宠物</span>
                <span class="text-xs px-2 py-1 rounded-full border border-gray-200 bg-gray-50">自带工具</span>
            </div>
        </section>

        <!-- 服务说明 -->
        <section class="bg-white rounded-lg shadow-sm mx-4 mt-4 p-4">
            <h3 class="text-base font-medium mb-3 flex items-center">
                <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                服务说明
            </h3>
            
            <ul class="text-sm text-gray-600 space-y-2">
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                    <span>抢单后系统将自动隐藏雇主详细地址和联系方式</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                    <span>服务开始前30分钟可查看完整地址</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                    <span>完成服务后需雇主确认方可收款</span>
                </li>
            </ul>
        </section>
    </main>

    <!-- 底部操作栏 -->
    <footer class="fixed-bottom-bar fixed bottom-0 left-0 right-0 bg-white py-3 px-4 border-t border-gray-100" style="bottom: 88rpx;">
        <div class="text-xs text-gray-500 mb-2 text-center">
            平台将收取10%服务费，抢单即表示同意<a href="#" class="text-blue-500">《服务协议》</a>
        </div>
        
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium" onclick="history.back()">
                返回列表
            </button>
            <button class="flex-1 py-2 bg-red-500 text-white rounded-lg font-medium shadow-sm hover:bg-red-600 transition-colors" 
                    onclick="confirmGrab()">
                确认抢单
            </button>
        </div>
    </footer>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="aunt-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="order-grab.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-bolt text-lg mb-1"></i>
            <span>抢单</span>
        </a>
        <a href="aunt-orders.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-clipboard-list text-lg mb-1"></i>
            <span>订单</span>
        </a>
        <a href="member-center.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        function confirmGrab() {
            if(confirm('确定要抢此订单吗？抢单后需按时完成服务，否则会影响您的信用评分。')) {
                alert('抢单成功！请按时前往服务');
                // 实际应用中这里会有跳转或状态更新逻辑
            }
        }
        
        // 移动端适配
        document.addEventListener('DOMContentLoaded', function() {
            const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
            if(viewportWidth > 750) {
                document.body.style.maxWidth = '750px';
                document.body.style.margin = '0 auto';
            }
        });
    </script>
</body>
</html>